<template>
    <div>
        <div class="guess">
            <div class="guesstitle">
                <div class="refresh">
                    <van-image width="15" height="15" :src="require('@/assets/shuaxin.png')" />
                    <span>猜你喜欢</span>
                </div>
                <div class="diyinterest">
                    <span>兴趣定制></span>
                </div>
            </div>
            <div class="guesscontent">
                <div class="module" 
                v-for="(item,index) in djdiy" 
                :key="index">
                    <van-image :src="item.picUrl" radius="0.5rem" width="6rem" />
                    <div class="moduletext">
                        <span>{{ item.category }}</span>
                        <span>{{ item.name }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

export default {
    data(){
        return{
            djdiy:[] //播客个性化
        };
    },
    created(){
        this.getdjData();
    },
    methods:{
        getdjData(){
            this.$request("get","/dj/personalize/recommend?limit=6").then((res) => {
                console.log(res);
                this.djdiy = res.data;
            });
        },
    },
};
</script>
<style scoped>
/* 猜你喜欢 */
.guess{
    margin: 1rem;
}
.guesstitle{
    display: flex;
    align-items: center;
}
.refresh{
    text-align: left;
}
.diyinterest{
    display: flex;
    justify-content: flex-end;
    width: 75%;
}
.module{
    display: inline-block;
    margin: 0.5rem;
    width: 6rem;
    height: 10rem;
    text-align: left;
    vertical-align: top;
}
.moduletext{
    display: -webkit-box;/**将此元素及其直系子代加入弹性框模型中 */
    -webkit-box-orient: vertical;/**垂直排列 */
    overflow: hidden;/**溢出的部分隐藏 */
    -webkit-line-clamp: 2;/**显示两行 */
    text-overflow: ellipsis;/**隐藏内容显示省略号 */
}
.moduletext :nth-of-type(1){
    font-size: 10px;
    color: coral;
    margin-right: 0.5rem;
    border: 1px solid #000000;
    border-radius: 0.5rem;
    padding-left: 4px;
    padding-right: 4px;
}
</style>